<template>
    <el-header class="me-area">
        <el-row class="me-header">
            <el-col :span="4" class="me-header-left" style="border-bottom: #d1dbe5 1px solid">
                <router-link to="/" class="me-title"  >
                    <img style="width: 85%;height: 85% ;" src="../assets/logo.png" />
                </router-link>
            </el-col>

            <el-col  :span="16">
                <el-menu :router=true menu-trigger="click" active-text-color="#00aaff"
                         mode="horizontal">
                    <el-menu-item @click="index()"  index="1">首页</el-menu-item>
                    <el-menu-item @click="ranking()"  index="2" >排行榜</el-menu-item>
                    <el-menu-item @click="all()"  index="3" >全部小说</el-menu-item>
                    <el-menu-item @click="grade()" index="4" >我要写作</el-menu-item>
                    <el-menu-item @click="bookrack()" index="4" >书架</el-menu-item>

                    <el-col :span="8" :offset="0">
                        <el-menu-item  index="">
                            <el-input v-model="input"   placeholder="请需要搜索的书本"></el-input>
                            <el-button type="primary" style="margin: 0 10px" @click="search()">搜索</el-button>
                        </el-menu-item>
                    </el-col>

                </el-menu>
            </el-col>
            <el-col :span="4">
                <el-menu :router=true menu-trigger="click" mode="horizontal" active-text-color="#00aaff">
                    <template v-if="isLogin">
                        <el-menu-item index="/login">
                            <el-button type="text">登录</el-button>
                        </el-menu-item>
                        <el-menu-item index="/register">
                            <el-button type="text">注册</el-button>
                        </el-menu-item>
                    </template>

                    <template v-else>
                        <el-submenu index>

                            <el-menu-item index>
                                <img @click="userinfo()" style="width: 40px;height: 40px" class="me-header-picture" :src="avatar"/><i class="el-icon-back"></i>
                                <p  @click="logout">退出</p>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-col>
        </el-row>
    </el-header>
</template>

<script>
    import request from "../utils/request";
    import router from "../router";

    export default {
        name: "Header",

        data() {
            return {
                input: "",
                avatar: "",
                isLogin: false,
                activeIndex: '1',
            }
        },
        created() {
            this.load()
        },
        methods: {
            logout() {
                // localStorage.removeItem("token")
                localStorage.clear();
                this.$router.push('/login')
            }, login() {
                // localStorage.removeItem("token")
                this.$router.push('/login')
            },
            search() {
                this.$router.push({path: '/search', query: {title: this.input}})
            },
            load() {
                const avatar = localStorage.getItem("avatar")
                if (localStorage.getItem("token") === null) {
                    this.isLogin = true
                }
                this.avatar = avatar
                console.log(this.avatar)
            },
            grade() {
                if (localStorage.getItem("token") === null) {
                    router.push("/login")
                    return
                }
                router.push("/registeredAuthor")
            },
            all() {
                router.push("all")
            },
            ranking() {
                router.push("ranking")
            },
            bookrack() {
                if (localStorage.getItem("token") === null) {
                    router.push("/login")
                    return
                }
                router.push("bookrack")
            },
            index() {
                router.push("/")
            },
            userinfo() {
                if (localStorage.getItem("token") === null) {
                    router.push("/login")
                    return
                }
                router.push("/user")
            }

        }

    }
</script>

<style>
    body {
        margin: 0px;
        padding: 0px;
    }

    .el-menu--horizontal {
        height: 60px;
    }

    .me-header-picture {
        width: 36px;
        height: 36px;
        border: 1px solid #ddd;
        border-radius: 50%;
        vertical-align: middle;
        background-color: #5fb878;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
